import React, { useEffect, useState } from "react";

// useEffect是用来解决函数组件的生命周期问题的
const App = () => {
  const [count, set_count] = useState(5);
  const fn = () => {
    set_count((v) => v + 1);
  };

  // useEffect(() => {
  //   console.log(count);
  // }, [count]);

  // 里面要接收两个参数，第一个参数是回调函数，第二个参数是数组(选填， 依赖)

  // 如果没有第二个参数，相当于componentDidMount和componentDidUpdate
  // 如果第二个参数是空数组，相当于componentDidMount

  // 第二个参数如果又内容，相当于watch监听
  // useEffect(() => {
  //   console.log(123);
  // }, [count]);

  // useEffect是可以执行多次的
  // 有一个空依赖, 并且里面有return一个函数，return的函数相当于componentWillUnMount
  // useEffect(() => {
  //   return () => {
  //     console.log(999);
  //   };
  // }, []);

  // useEffect(() => {
  //   const timer = setInterval(() => {
  //     console.log(123);
  //   }, 1000);
  //   return () => {
  //     clearInterval(timer);
  //   };
  // }, []);

  const getData = () => {
    return fetch("http://www.pudge.wang:3080/api/rated/list")
      .then((response) => response.json())
      .then((res) => {
        return res;
      });
  };

  // 如果封装好的数据请求，要在useEffect里面用，要改写成自执行函数
  useEffect(() => {
    (async () => {
      const res = await getData();
      console.log(res);
    })();
  }, []);

  return (
    <>
      <h3>useEffect</h3>
      <p>{count}</p>
      <button onClick={fn}>+</button>
    </>
  );
};

export default App;
